<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>go-caipu 安装向导</title>
    <link rel="shortcut icon" href="./logo.png" />
    <!-- Vue 3 -->
    <script src="./js/vue.3.3.4.prod.js"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="./css/element-plus2.3.8.css">
    <script src="./js/element-plus2.3.8.js"></script>
    <!-- Axios -->
    <script src="./js/axios.min.js"></script>

    <!-- 引入Element Plus图标 -->
<!--    <script src="https://unpkg.com/@element-plus/icons-vue"></script>-->

    <script src="./js/element-plug.icons-vue.2.3.2.js"></script>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-light: #4cc9f0;
            --success-color: #06d6a0;
            --warning-color: #ffd166;
            --danger-color: #ef476f;
            --text-primary: #2b2d42;
            --text-secondary: #6c757d;
            --bg-light: #f8f9fa;
            --border-color: #e9ecef;
            --card-shadow: 0 10px 25px -5px rgba(67, 97, 238, 0.1), 0 10px 10px -5px rgba(67, 97, 238, 0.04);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background:
                    linear-gradient(135deg,
                    rgba(67, 97, 238, 0.15) 0%,
                    rgba(76, 201, 240, 0.2) 25%,
                    rgba(255, 255, 255, 0.95) 50%,
                    rgba(76, 201, 240, 0.18) 75%,
                    rgba(67, 97, 238, 0.12) 100%),
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%234361ee" stop-opacity="0.08"/><stop offset="100%" stop-color="%234cc9f0" stop-opacity="0.06"/></linearGradient><linearGradient id="grad2" x1="100%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="%234cc9f0" stop-opacity="0.05"/><stop offset="100%" stop-color="%234361ee" stop-opacity="0.04"/></linearGradient></defs><rect width="400" height="400" fill="url(%23grad1)"/><rect width="400" height="400" fill="url(%23grad2)"/><circle cx="80" cy="80" r="15" fill="%234361ee" opacity="0.06"/><circle cx="320" cy="320" r="20" fill="%234cc9f0" opacity="0.05"/><circle cx="200" cy="200" r="12" fill="%234361ee" opacity="0.04"/><circle cx="350" cy="150" r="8" fill="%234cc9f0" opacity="0.03"/><circle cx="50" cy="300" r="10" fill="%234361ee" opacity="0.05"/></svg>');
            background-size: cover, 400px 400px;
            background-position: center, 0 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            color: var(--text-primary);
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                    radial-gradient(circle at 20% 80%, rgba(76, 201, 240, 0.25) 0%, transparent 70%),
                    radial-gradient(circle at 80% 20%, rgba(67, 97, 238, 0.2) 0%, transparent 70%),
                    radial-gradient(circle at 50% 50%, rgba(76, 201, 240, 0.15) 0%, transparent 80%),
                    radial-gradient(circle at 40% 40%, rgba(67, 97, 238, 0.12) 0%, transparent 75%);
            z-index: -1;
            animation: float 10s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            33% {
                transform: translateY(-8px) rotate(0.5deg);
            }
            66% {
                transform: translateY(-4px) rotate(-0.5deg);
            }
        }

        .install-container {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(20px);
            border-radius: 10px;
            box-shadow:
                    0 25px 50px rgba(67, 97, 238, 0.18),
                    0 15px 30px rgba(76, 201, 240, 0.12),
                    0 5px 15px rgba(255, 255, 255, 0.2),
                    inset 0 1px 0 rgba(255, 255, 255, 0.9);
            width: 100%;
            max-width: 750px;
            padding: 35px;
            animation: containerFloat 6s ease-in-out infinite, fadeIn 0.8s ease-out;
            position: relative;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
        }

        .install-container:hover {
            transform: translateY(-2px);
            box-shadow:
                    0 30px 60px rgba(67, 97, 238, 0.22),
                    0 20px 40px rgba(76, 201, 240, 0.15),
                    0 8px 20px rgba(255, 255, 255, 0.25);
        }

        .install-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg,
            var(--primary-color) 0%,
            var(--primary-light) 50%,
            var(--primary-color) 100%);
            background-size: 200% 100%;
            animation: gradientShift 3s ease-in-out infinite;
        }

        @keyframes containerFloat {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-3px);
            }
        }

        @keyframes gradientShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        .install-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 品牌与页头美化（精简占用空间，logo+标题一行） */
        .install-header {
            text-align: center;
            margin-bottom: 16px;
            position: relative;
        }
        .brand-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .brand-logo {
            width: 40px;
            height: 40px;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 6px 12px rgba(67, 97, 238, 0.12);
            background: #fff;
            padding: 4px;
            border: 1px solid var(--border-color);
        }
        .brand-title {
            margin: 0;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -0.2px;
            background: linear-gradient(90deg, var(--text-primary), var(--primary-color));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .brand-subtitle {
            text-align: center;
            color: var(--text-secondary);
            margin-top: 6px;
            font-size: 12px;
        }

        /* 左右布局：左侧步骤，右侧内容 */
        .install-body {
            display: grid;
            grid-template-columns: 180px 1fr;
            gap: 16px;
            align-items: start;
        }
        .steps-sidebar {
            position: sticky;
            top: 12px;
            align-self: start;
            padding: 8px 4px;
            background: var(--bg-light);
            border-radius: 10px;
            border: 1px solid var(--border-color);
        }
        .steps-sidebar .el-steps {
            background: transparent;
            padding: 8px 6px;
        }
        .steps-sidebar .el-steps.el-steps--vertical .el-step {
            margin-bottom: 14px;
        }
        .steps-sidebar .el-steps.el-steps--vertical .el-step__icon.is-text {
            margin-right: 8px;
        }
        .content-area {
            min-width: 0; /* 防止过宽内容溢出 */
        }

        /* 步骤条样式 */
        .steps-container {
            margin-bottom: 25px;
        }

        .el-steps {
            background: var(--bg-light);
            padding: 12px 15px;
            border-radius: 10px;
            transition: all 0.3s ease;
            min-height: auto;
        }

        .el-step {
            position: relative;
        }

        .el-step__title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
            margin-top: 6px;
            letter-spacing: 0.2px;
        }

        .el-step__description {
            display: none;
        }

        .el-step__icon.is-text {
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 13px;
            font-weight: 600;
            border-width: 2px;
            background: white;
            transition: all 0.2s ease;
        }

        .el-step__head.is-finish .el-step__icon {
            background-color: var(--success-color) !important;
            border-color: var(--success-color) !important;
            color: white !important;
            transform: none;
            box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.12);
        }

        .el-step__head.is-process .el-step__icon {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
            transform: none;
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.12);
        }

        .el-step__head.is-wait .el-step__icon {
            border-color: var(--border-color) !important;
            color: var(--text-secondary) !important;
        }

        .el-step__line {
            background-color: var(--border-color);
            height: 2px;
        }

        .el-step__line.is-finish {
            background-color: var(--success-color) !important;
        }

        .el-step__line.is-process {
            background-color: var(--primary-color) !important;
        }

        .el-step__line-inner {
            transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* 步骤内容样式 */
        .install-step {
            animation: slideIn 0.6s ease-out;
            background: white;
            border-radius: 12px;
            padding: 10px;
            overflow-y: visible;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            flex: 1;
            min-width: 430px;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(15px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .step-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
        }

        .step-title .el-icon {
            margin-right: 10px;
            color: var(--primary-color);
            font-size: 18px;
        }

        .step-title h2 {
            margin: 0;
            font-size: 18px;
            color: var(--text-primary);
            font-weight: 700;
        }

        /* 表单样式 */
        .form-description {
            margin-bottom: 15px;
        }

        .form-description p {
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.5;
        }

        .el-form {
            width: 100%;
        }

        .el-form-item {
            margin-bottom: 15px;
            transition: all 0.3s ease;
        }

        .el-form-item__label {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            padding-right: 10px;
        }

        .el-input__wrapper {
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: white;
            transition: all 0.3s ease;
            height: 40px;
        }

        .el-input__wrapper:hover {
            border-color: var(--primary-light);
            box-shadow: 0 0 0 2px rgba(76, 201, 240, 0.1);
        }

        .el-input__wrapper.is-focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.15);
        }

        .el-input__inner {
            height: 40px !important;
            line-height: 40px !important;
            font-size: 13px;
            color: var(--text-primary);
        }

        /* 按钮样式 */
        .btn-group {
            display: flex;
            justify-content: flex-end;
            margin-top: 5px;
            gap: 10px;
            padding-top: 12px;
        }

        .el-button {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            height: auto;
        }

        .el-button--default {
            background: white;
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }

        .el-button--default:hover {
            border-color: var(--primary-light);
            color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }

        .el-button--primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border: none;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .el-button--primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: all 0.6s;
        }

        .el-button--primary:hover::before {
            left: 100%;
        }

        .el-button--primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 12px rgba(67, 97, 238, 0.3);
        }

        .el-button--primary:disabled {
            opacity: 0.6;
            transform: none;
            box-shadow: none;
        }

        /* 结果消息样式 */
        .result-message {
            margin-top: 5px;
            padding: 5px;
            border-radius: 6px;
            border: 1px solid var(--success-color);
            background-color: #f0fdf4;
            color: var(--success-color);
            transition: all 0.3s ease;
            animation: slideIn 0.5s ease-out;
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 500;
        }

        .result-message.error {
            background-color: #fef2f2;
            border-color: var(--danger-color);
            color: var(--danger-color);
        }

        .result-message .el-icon {
            margin-right: 8px;
            font-size: 18px;
            flex-shrink: 0;
        }

        /* 加载状态样式 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px 15px;
        }

        .el-loading-spinner {
            font-size: 40px !important;
            color: var(--primary-color);
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .skip-link {
            color: var(--primary-color);
            cursor: pointer;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }

        .skip-link:hover {
            background: rgba(67, 97, 238, 0.1);
            color: var(--primary-light);
        }

        /* 成功消息样式 */
        .success-message {
            text-align: center;
            padding: 10px 15px;
        }

        .success-icon {
            color: var(--success-color);
            font-size: 50px;
           /* margin-bottom: 15px; */
            animation: bounceIn 0.8s ease-out;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            60% {
                transform: scale(1.1);
            }
            80% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .success-message h2 {
            margin: 0;
            color: var(--success-color);
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .success-message p {
            color: var(--text-secondary);
            font-size: 15px;
            line-height: 1.5;
            max-width: 450px;
            margin: 0 auto 20px;
        }

        /* 数据库创建步骤样式 */
        .db-creation-content {
            text-align: center;
            padding: 30px 10px;
        }

        .db-creation-content p {
            font-size: 15px;
            color: var(--text-primary);
            font-weight: 500;
            margin-bottom: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .install-container {
                padding: 20px 12px;
                max-width: 100%;
                max-height: 98vh;
            }

            .install-header h1 {
                font-size: 22px;
            }

            .el-steps {
                padding: 10px 8px;
            }

            .el-step__title {
                font-size: 11px;
            }

            .el-step__icon.is-text {
                width: 24px;
                height: 24px;
                line-height: 24px;
                font-size: 12px;
            }

            .install-step {
                padding: 15px 8px;
            }

            .step-title h2 {
                font-size: 16px;
            }

            .btn-group {
                flex-direction: column;
            }

            .el-button {
                width: 100%;
            }

            .success-message {
                padding: 20px 10px;
            }

            .success-icon {
                font-size: 40px;
            }
        }
    </style>
    <script src="js/element-plug.icons-vue.2.3.2.js"></script>
</head>
<body>
<div id="app">
    <div class="install-container">
        <div class="install-header">
            <div class="brand-row">
                <img src="./logo.png" alt="go-caipu logo" class="brand-logo" />
                <h1 class="brand-title">go-caipu系统 安装向导</h1>
            </div>
            <p class="brand-subtitle">快速完成数据库与部署类型配置，立即开启您的系统</p>
        </div>

        <!-- 步骤指示器 -->
        <div class="install-body">
            <div class="steps-sidebar">
                <el-steps :active="currentStep" align-center direction="vertical">
                    <el-step title="数据库配置" description="配置数据库连接信息"></el-step>
                    <el-step title="部署配置" description="配置缓存服务"></el-step>
                    <el-step title="保存配置" description="初始化系统数据"></el-step>
                    <el-step title="安装完成" description="开始使用系统"></el-step>
                </el-steps>
            </div>

            <!-- 步骤内容 -->
            <div class="content-area">
                <div v-if="currentStep === 0" class="install-step">
                    <div class="step-title">
                        <el-icon><Tools /></el-icon>
                        <h2>数据库配置</h2>
                    </div>
                    <div class="form-description">
                        <p style="color: #666; font-size: 14px;">配置您的数据库连接信息，更多配置仍需通过配置文件调整。</p>
                    </div>
                    <!-- 数据库类型选择 -->
                    <el-form label-width="120px" style="width: 100%; padding: 5px 0;">
                        <el-form-item label="数据库类型">
                            <el-radio-group v-model="databaseType" @change="handleDatabaseTypeChange">
                                <el-radio label="mysql">MySQL</el-radio>
                                <el-radio label="sqlite">SQLite</el-radio>
                                <el-radio label="postgresql" disabled>PostgreSQL</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>



                    <!-- 详细配置（必填） -->
                    <div class="detail-section">
                        <h3 style="margin: 10px 0; font-size: 16px;">详细配置（必填）</h3>
                        <div style="padding-right: 10px;">
                            <!-- MySQL详细配置 -->
                            <el-form v-if="databaseType === 'mysql'" :model="databaseForm" label-width="120px" style="width: 100%; padding: 10px 0;">
                                <el-form-item label="数据库主机" prop="host">
                                    <el-input v-model="databaseForm.host" placeholder="localhost" ></el-input>
                                </el-form-item>
                                <el-form-item label="数据库端口" prop="port">
                                    <el-input type="number" v-model="databaseForm.port" placeholder="3306" ></el-input>
                                </el-form-item>
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="databaseForm.username" placeholder="root" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="databaseForm.password" placeholder="密码" type="password" ></el-input>
                                </el-form-item>
                                <el-form-item label="数据库名" prop="dbname">
                                    <el-input v-model="databaseForm.dbname" placeholder="go_caipu" ></el-input>
                                </el-form-item>
                                <el-form-item label="字符集" prop="charset">
                                    <el-select v-model="databaseForm.charset" placeholder="请选择">
                                        <el-option value="utf8mb4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>

                            <!-- SQLite详细配置 -->
                            <el-form v-else-if="databaseType === 'sqlite'" :model="sqliteForm" label-width="120px" style="width: 100%; padding: 20px 0;">
                                <el-form-item label="数据库文件名称" prop="path">
                                    <el-input v-model="sqliteForm.path" placeholder="go_caipu.db" >
                                        <template #append>
                                            <el-button @click="suggestSQLitePath">恢复默认</el-button>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </el-form>

                            <!-- PostgreSQL详细配置 -->
                            <el-form v-else-if="databaseType === 'postgresql'" :model="postgresForm" label-width="120px" style="width: 100%; padding: 20px 0;">
                                <el-form-item label="数据库主机" prop="host">
                                    <el-input v-model="postgresForm.host" placeholder="localhost" ></el-input>
                                </el-form-item>
                                <el-form-item label="数据库端口" prop="port">
                                    <el-input v-model="postgresForm.port" placeholder="5432" ></el-input>
                                </el-form-item>
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="postgresForm.username" placeholder="postgres" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="postgresForm.password" placeholder="密码" type="password" ></el-input>
                                </el-form-item>
                                <el-form-item label="数据库名" prop="dbname">
                                    <el-input v-model="postgresForm.dbname" placeholder="go_caipu" ></el-input>
                                </el-form-item>
                                <el-form-item label="SSL模式" prop="sslmode">
                                    <el-select v-model="postgresForm.sslmode" placeholder="disable" @change="updateDSN">
                                        <el-option label="disable" value="disable"></el-option>
                                        <el-option label="require" value="require"></el-option>
                                        <el-option label="verify-ca" value="verify-ca"></el-option>
                                        <el-option label="verify-full" value="verify-full"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="btn-group">
                        <el-button @click="CheckDBConn" type="text" :loading="checkingConnection">测试连接</el-button>
                        <el-button type="primary" @click="nextStep" :loading="loading">下一步</el-button>
                    </div>
                    <div v-if="connectionResult" :class="['result-message', { 'error': !connectionResult.success }]" style="margin: 30px auto; max-width: 500px;">
                        <el-icon  v-if="!connectionResult.success" class="error-icon" style="font-size: 32px;"><Close /></el-icon>
                        <el-icon  v-if="connectionResult.success" class="success-icon" style="font-size: 32px;"><Check /></el-icon>
                        <span style="font-size: 16px; margin-left: 5px;">{{ connectionResult.message }}</span>
                    </div>

                </div>

                <div v-else-if="currentStep === 1" class="install-step">
                    <div class="step-title">
                        <el-icon><Cloudy /></el-icon>
                        <h2>部署配置</h2>
                    </div>
                    <div class="form-description">
                        <p style="color: #666; font-size: 14px; margin-bottom: 24px;">配置服务器部署模式用于提高系统性能。如果您暂时不需要可以默认。</p>
                    </div>
                    <!-- 部署模式选择 -->
                    <el-form label-width="120px" style="width: 100%; padding: 10px 0;">
                        <el-form-item label="部署模式">
                            <el-radio-group v-model="deploymentType">
                                <el-radio label="standalone">单机部署</el-radio>
                                <el-radio label="cluster">多机部署（必须配置Redis）</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="deploymentType === 'cluster'" :model="redisForm" label-width="120px" style="width: 100%; padding: 5px 0;">
                        <el-form-item label="Redis主机" prop="host">
                            <el-input v-model="redisForm.host" placeholder="请输入Redis主机地址"></el-input>
                        </el-form-item>
                        <el-form-item label="Redis端口" prop="port">
                            <el-input  v-model="redisForm.port" placeholder="请输入Redis端口" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="Redis密码" prop="password">
                            <el-input v-model="redisForm.password" placeholder="请输入Redis密码" type="password"></el-input>
                        </el-form-item>
                        <el-form-item label="数据库编号" prop="db">
                            <el-input v-model="redisForm.db" placeholder="请输入Redis数据库编号" type="number"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="btn-group">
                        <el-button type="text" :loading="checkingRedisConnection" v-if="deploymentType === 'cluster'" @click="checkRedisConn">测试连接</el-button>
                        <el-button @click="prevStep">上一步</el-button>
                        <el-button type="primary" @click="saveConfig" :loading="savingConfig">保存配置</el-button>
                    </div>
                    <div v-if="connectionRedisResult" :class="['result-message', { 'error': !connectionRedisResult.success }]" style="margin: 30px auto; max-width: 500px;">
                        <el-icon  v-if="!connectionRedisResult.success" class="error-icon" style="font-size: 32px;"><Close /></el-icon>
                        <el-icon  v-if="connectionRedisResult.success" class="success-icon" style="font-size: 32px;"><Check /></el-icon>
                        <span style="font-size: 16px; margin-left: 12px;">{{ connectionRedisResult.message }}</span>
                    </div>
                </div>

                <div v-else-if="currentStep === 2" class="install-step">
                    <div class="step-title">
                        <el-icon><Cpu /></el-icon>
                        <h2>保存配置</h2>
                    </div>
                    <div class="db-creation-content" style="padding: 40px 0; text-align: center;">
                        <p v-if="!dbCreationResult" style="font-size: 16px; color: #333; margin-bottom: 30px;">配置已保存，正在创建数据库...</p>
                        <div v-if="dbCreationResult" :class="['result-message', { 'error': !dbCreationResult.success }]" style="margin: 10px auto; max-width: 500px;">
                            <el-icon  v-if="!dbCreationResult.success" class="error-icon" style="font-size: 32px;"><Close /></el-icon>
                            <el-icon  v-if="dbCreationResult.success" class="success-icon" style="font-size: 32px;"><Check /></el-icon>
                            <span style="font-size: 16px; margin-left: 12px;">{{ dbCreationResult.message }}</span>
                        </div>
                        <div v-if="dbCreationResult" class="btn-group" style="margin-top: 20px;">
                            <el-button  @click="restartInstallation">重新配置</el-button>
                            <el-button v-if="dbCreationResult.success" type="primary" @click="nextStep">安装成功</el-button>
                        </div>
                    </div>
                </div>

                <div v-else-if="currentStep === 3" class="install-step">
                    <div class="success-message" style="text-align: center; padding: 60px 20px;">
                        <el-icon class="success-icon" style="font-size: 64px; margin-bottom: 10px; animation: bounceIn 0.6s ease-in-out;"><Check /></el-icon>
                        <h2 style="margin: 20px 0 10px 0; color: #52c41a; font-size: 28px; font-weight: 600;">安装完成</h2>
                        <p style="color: #666; font-size: 16px; line-height: 1.6; max-width: 500px; margin: 0 auto 30px;">恭喜您！go-caipu 已成功安装，重启系统服务后点击下方按钮进入系统。</p>
                        <el-button type="primary" @click="finishInstall" style="margin-top: 20px; padding: 12px 30px; font-size: 16px;">跳转首页</el-button>
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- end of content-area -->
</div> <!-- end of install-body -->
<script>
    const { createApp } = Vue;
    const { ElMessage, ElLoading } = ElementPlus;
    const { Tools, Cloudy, Cpu, Check,Close } = ElementPlusIconsVue;

    const app = createApp({
        components: {
            Tools,
            Cloudy,
            Cpu,
            Close,
            Check
        },
        data() {
            return {
                currentStep: 0,
                databaseType: 'mysql',
                deploymentType: 'standalone',
                loading: false,
                checkingConnection: false,
                checkingRedisConnection: false,
                savingConfig: false,
                connectionResult: null,
                connectionRedisResult:null,
                dbCreationResult: null,
                skipRedis: false,
                showDetailedConfig: [],
                databaseForm: {
                    host: 'localhost',
                    port: '3306',
                    username: 'root',
                    password: '123456',
                    dbname: 'go_caipu',
                    charset: 'utf8mb4'
                },
                sqliteForm: {
                    path: 'go_caipu.db'
                },
                postgresForm: {
                    host: 'localhost',
                    port: '5432',
                    username: 'postgres',
                    password: '',
                    dbname: 'go_caipu',
                    sslmode: 'disable'
                },
                redisForm: {
                    host: 'localhost',
                    port: '6379',
                    password: '',
                    db: 0
                }
            }
        },
        computed: {
        },
        mounted() {
            // 检查安装状态
            this.checkInstallStatus();
        },
        methods: {
            checkInstallStatus() {
                axios.get('/api/install/status')
                    .then(response => {
                        if (response.data.installed) {
                            window.location.href = '/';
                        }
                    })
                    .catch(error => {
                        console.error('检查安装状态失败:', error);
                    });
            },
            CheckDBConn(){
                this.checkingConnection = true;
                this.connectionResult = null;

                // 校验数据库详细配置
                if (!this.validateDatabaseConfig()) {
                    this.checkingConnection = false;
                    return;
                }

                const config = {
                        type: this.databaseType,
                        host:this.databaseForm.host,
                        port:this.databaseForm.port,
                        username:this.databaseForm.username,
                        password: this.databaseForm.password,
                        charset: this.databaseForm.charset,
                        sqlite:{
                            path: this.sqliteForm.path,
                        }
                };

                axios.post('/api/install/dbtest', config)
                    .then(response => {
                        this.connectionResult = {
                            success: true,
                            message: '数据库连接成功！'
                        };
                        ElMessage.success('数据库连接成功！');
                    })
                    .catch(error => {
                        this.connectionResult = {
                            success: false,
                            message: '数据库连接失败：' + (error.response?.data?.error || error.message)
                        };
                        ElMessage.error('数据库连接失败！');
                    })
                    .finally(() => {
                        this.checkingConnection = false;
                    });
            },
            prevStep() {
                if (this.currentStep > 0) {
                    this.currentStep--;
                }
            },

            // 测试Redis连接
            checkRedisConn() {
                    this.checkingRedisConnection = true;
                    this.connectionRedisResult = null;
                    // 校验数据库详细配置
                    if (!this.validateRedisConfig()) {
                        this.checkingRedisConnection = false;
                        return;
                    }

                    const config = {
                        host: this.redisForm.host,
                        port: this.redisForm.port,
                        password: this.redisForm.password,
                        db:this.redisForm.db,
                    };

                    axios.post('/api/install/redistest', config)
                        .then(response => {
                            this.connectionRedisResult = {
                                success: true,
                                message: 'redis连接成功！'
                            };
                            ElMessage.success('redis连接成功！');
                        })
                        .catch(error => {
                            this.connectionRedisResult = {
                                success: false,
                                message: 'redis连接失败：' + (error.response?.data?.error || error.message)
                            };
                            ElMessage.error('redis连接失败！');
                        })
                        .finally(() => {
                            this.checkingRedisConnection = false;
                        });
            },

            // 重新配置数据库
            restartInstallation() {
                this.currentStep = 0;
                this.dbCreationResult = null;
            },
            nextStep() {
                if (this.currentStep === 0) {
                    if (!this.validateDatabaseConfig()) {
                        return;
                    }
                }
                this.currentStep++;
            },
            // 处理数据库类型变化
            handleDatabaseTypeChange() {
                this.showDetailedConfig = [];
            },

            // 校验数据库详细配置必填项
            validateDatabaseConfig() {
                if (this.databaseType === 'mysql') {
                    const fields = this.databaseForm;
                    if (!fields.host || !fields.port || !fields.username || !fields.dbname) {
                        ElMessage.error('请填写MySQL的主机、端口、用户名、数据库名');
                        return false;
                    }
                } else if (this.databaseType === 'sqlite') {
                    if (!this.sqliteForm.path) {
                        ElMessage.error('请填写SQLite数据库路径');
                        return false;
                    }
                } else if (this.databaseType === 'postgresql') {
                    const fields = this.postgresForm;
                    if (!fields.host || !fields.port || !fields.username || !fields.dbname) {
                        ElMessage.error('请填写PostgreSQL的主机、端口、用户名、数据库名');
                        return false;
                    }
                }
                return true;
            },

            // 校验Redis配置（多机部署必须）
            validateRedisConfig() {
                if (this.deploymentType === 'cluster') {
                    if (!this.redisForm.host || !this.redisForm.port) {
                        ElMessage.error('多机部署需要填写 Redis 主机和端口');
                        return false;
                    }
                }
                return true;
            },
            
            // 推荐SQLite路径
            suggestSQLitePath() {
                this.sqliteForm.path = 'go_caipu.db';
                ElMessage.info('已设置为推荐名称');
            },

            checkConnection() {
                this.checkingConnection = true;
                this.connectionResult = null;

                // 校验数据库详细配置
                if (!this.validateDatabaseConfig()) {
                    this.checkingConnection = false;
                    return;
                }
                
                const config = {
                    database: {
                        type: this.databaseType,
                    },
                    redis: this.redisForm,
                    deploymentType: this.deploymentType
                };

                axios.post('/api/install/redistest', config)
                    .then(response => {
                        this.connectionResult = {
                            success: true,
                            message: '数据库连接成功！'
                        };
                        ElMessage.success('数据库连接成功！');
                    })
                    .catch(error => {
                        this.connectionResult = {
                            success: false,
                            message: '数据库连接失败：' + (error.response?.data?.error || error.message)
                        };
                        ElMessage.error('数据库连接失败！');
                    })
                    .finally(() => {
                        this.checkingConnection = false;
                    });
            },
            saveConfig() {
                this.savingConfig = true;
                
                // 多机部署必须填写 Redis 主机和端口
                if (this.deploymentType === 'cluster') {
                    if (!this.redisForm.host || !this.redisForm.port) {
                        ElMessage.error('多机部署需要填写 Redis 主机和端口');
                        this.savingConfig = false;
                        return;
                    }
                }
                const config = {
                    database:this.databaseForm,
                    redis: this.redisForm,
                    deploymentType: this.deploymentType,
                };
                config.database.type= this.databaseType
                config.database.sqlite=this.sqliteForm
                this.nextStep();
                axios.post('/api/install/configure', config)
                    .then(response => {
                        this.dbCreationResult = {
                            success: true,
                            message: '数据库创建成功！'
                        };
                        ElMessage.success('数据库创建成功！');

                    })
                    .catch(error => {
                        this.dbCreationResult = {
                            success: false,
                            message: ' ' + (error.response?.data?.error || error.message)
                        };
                        ElMessage.error('数据库创建失败！');
                    })
                    .finally(() => {
                        this.savingConfig = false;
                    });
            },
            finishInstall() {
                        ElMessage.success('安装完成！');
                        setTimeout(() => {
                            window.location.href = '/';
                        }, 2000);
            }
        }
    });

    // 使用Element Plus
    app.use(ElementPlus);

    // 挂载应用
    app.mount('#app');
</script>
</body>
</html>